<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="8" :xs="24">
        <el-card class="box-card" shadow="always">
          <div>
            <div id="main" :style="{width: '700px', height: '300px'}" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="16" :xs="24">
        <el-card class="box-card" shadow="always">
          <!-- 搜索表单 -->
          <el-form ref="queryForm" :inline="true" :model="queryParams" size="mini">
            <el-form-item>
              <el-input
                v-model="queryParams.username"
                clearable
                placeholder="代理名称"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                v-has-permission="['member:member:orderItemList']"
                icon="el-icon-search"
                type="primary"
                @click="handleQuery"
              >搜索
              </el-button>
              <el-button
                icon="el-icon-refresh"
                @click="handleReset"
              >重置
              </el-button>
            </el-form-item>
          </el-form>

          <!-- 数据表格 -->
          <el-table
            v-loading="loading"
            :data="pageList"
            border
            highlight-current-row
            size="mini"
          >
            <el-table-column ref="table" prop="avatar" label="进货代理">
              <template slot-scope="scope">
                <span>{{ scope.row.nickName }} {{ scope.row.mobile }}</span>
              </template>
            </el-table-column>
            <el-table-column label="进货所属商品" prop="productName" />
            <el-table-column label="商品图片" prop="memberLevel.name">
              <template slot-scope="scope">
                <el-image :src="scope.row.productImage" class="el-avatar" :preview-src-list="[scope.row.productImage]">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline" />
                  </div>
                </el-image>
              </template>
            </el-table-column>
            <el-table-column label="进货数量	" prop="num" />
            <el-table-column label="进货款" prop="allPrice" />
            <el-table-column label="进货时间" prop="createTime" />
          </el-table>
          <pagination
            v-show="pagination.total > 0"
            :limit.sync="pagination.limit"
            :page.sync="pagination.page"
            :total="pagination.total"
            @pagination="handleQuery"
          />
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import checkPermission from '@/utils/permission'
import { listOrderItem } from '@/api/oms/order'
import { hotGoods } from '@/api/pms/yxStoreProduct'
import echarts from 'echarts'

export default {
  name: 'Index',
  data() {
    return {
      loading: false,
      ids: [],
      single: true,
      multiple: true,
      queryParams: {
        username: undefined
      },
      pageList: [],
      pagination: {
        page: 1,
        limit: 10,
        total: 0
      },
      charts: '',
      opinion: ['访问', '邮件', '广告', '视频', '搜索'],
      // opinion: [],
      opinionData: [
        { value: 335, name: '访问' },
        { value: 310, name: '邮件' },
        { value: 234, name: '广告' },
        { value: 135, name: '视频' },
        { value: 154, name: '搜索' }
      ]
    }
  },
  async created() {
    this.handleQuery()
  },
  mounted() {
    this.getHotGoods()
  },
  methods: {
    checkPermission,
    getHotGoods() {
      const kk = []
      hotGoods().then(res => {
        for (let a = 0; a < res.data.length; a++) {
          // 注意，这里的eval函数特别关键，可将后端返回的Json字符串，装有json字符串元素的list集合转为js可用的对象
          kk[a] = eval('(' + res.data[a] + ')')
          this.opinion[a] = kk[a].name
        }
        console.log(this.opinion)

        for (let i = 0; i < res.data.length; i++) {
          this.opinionData[i] = eval('(' + res.data[i] + ')')
        }
        this.drawPie('main')
      })
      console.log(this.opinionData)
    },
    handleQuery() {
      this.loading = true
      this.queryParams.pageNum = this.pagination.page
      this.queryParams.pageSize = this.pagination.limit
      listOrderItem(this.queryParams).then(({ data }) => {
        this.pageList = data.list
        this.pagination.total = data.totalCount
        this.loading = false
      })
    },
    handleReset() {
      this.pagination = {
        page: 1,
        limit: 10,
        total: 0
      }
      this.queryParams.name = undefined
      this.handleQuery()
    },

    drawPie(id) {
      this.charts = echarts.init(document.getElementById(id))
      this.charts.setOption({
        title: {
          text: '热门商品销量', // 主标题
          // subtext: '我是副标题可有可无',//副标题
          x: 'center', // x轴方向对齐方式
          top: 10, // 标题栏的高度，值越大，距离顶部的距离越大
          textStyle: {
            color: '#000' // 标题栏字体的颜色
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          bottom: 'bottom',
          data: this.opinion
        },
        series: [
          {
            name: '商品销量', 	 // 饼图中内容介绍
            type: 'pie', // 统计表的类型
            radius: '60%', // 饼图的弧度，值越小生成的饼状图越小
            center: ['50%', '55%'], 			// 饼图生成后的位置
            data: this.opinionData,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }

            }

          }
        ]

      })
    }
  }
}
</script>

<style>
canvas {
  left: -115px !important;
}

</style>
